<template>
	<view>
		<custom-header title="平台代卖" />
		<view class="_wrap">
			<view class="tabs_wrap">
				<view 
					class="list" 
					:class="tab == item.id?'active':''" 
					v-for="(item,index) in tabsList" 
					:key="index"
					@click="handleTab(item)">
					{{ item.name }}
				</view>
			</view>
			<view class="inform_wrap">
				<view class="icon">
					<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/trumpet.png" mode=""></image>
				</view>
				<view class="text">
					注意：仅可在9:00~17:00之间提交代卖！
				</view>
			</view>
			<scroll-view
				:scroll-y="true" 
				scroll-with-animation
				:style="{height:'calc(100vh - 82rpx - 128rpx - 5rpx - '+(tab == 2?120:0)+'rpx - '+statusBarHeight+'px)'}"
				class="scroll_content_wrap">
					<view
						class="no_data" 
						v-if="!listData.length && listLoading != 'loading'">
							<view class="icon">
								<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nodata.png" mode=""></image>
							</view>
					</view>
					<!-- 我的商品 - 列表 -->
					<view class="list_wrap" v-if="listData.length && tab == 1">
						<view class="list" v-for="(item,index) in listData" :key="index">
							<view class="name_status">
								<view class="name">{{ item.name }}</view>
								<view class="status" v-if="item.isAgent === '1'">代售中</view>
							</view>
							<view class="branch_count_btn">
								<view class="branch">
									规格：{{ item.specName }}
								</view>
								<view class="count" @click="handleShowAdjustCount(item, index)">
									<viwe class="lable">数量</viwe>
									<viwe class="value">{{ item.applyQuantity }}</viwe>
								</view>
								<view 
									class="btn"
									@click="handleAgentApply(item)"
									hover-class="confirm_hover"
									:hover-stay-time="200">
									提交代卖
								</view>
							</view>
						</view>
					</view>
					<!-- 待提货 - 列表 -->
					<view class="list_wrap" v-if="listData.length && tab == 2">
						<view class="list" v-for="(item,index) in listData" :key="index">
							<view class="name_status">
								<view class="name">{{ item.productName }}</view>
								<view class="status1">待提货</view>
							</view>
							<view class="branch_count_btn">
								<view class="branch">
									规格：{{ item.specName }}
								</view>
								<view class="count">
									<custom-number v-model="item.actQuantity"></custom-number>
								</view>
								<view 
									class="btn"
									@click="handleUpdateActQuantity(item)"
									hover-class="confirm_hover"
									:hover-stay-time="200">
									确定修改
								</view>
							</view>
						</view>
					</view>
					<!-- 待交易 - 列表 -->
					<view class="dyj_list_wrap" v-if="listData.length && (tab == 3 || tab == 4)">
						<view class="list" v-for="(item,index) in listData" :key="index">
							<view class="name_grade">
								<view class="name">
									<view class="icon">
										<image src="/static/common/good_icon.png" mode=""></image>
									</view>
									<view class="text">{{ item.productName }}</view>
								</view>
								<view class="grade">{{ item.gradeName }}</view>
							</view>
							<view class="branch_count_take">
								<view class="branch">
									<view class="label">
										规格：
									</view>
									<view class="value">
										{{ item.specName }}
									</view>
									
								</view>
								<view class="count" v-if="tab == 3">
									<view class="label">
										数量：
									</view>
									<view class="value">
										{{ item.actQuantity }}扎
									</view>
								</view>
								<view class="take">
									<view class="label">
										实收：
									</view>
									<view class="value">
										{{ item.stockQuantity }}扎
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 已完成 - 列表 -->
					<view class="wc_list_wrap" v-if="listData.length && tab == 5">
						<view class="list" v-for="(item,index) in listData" :key="index">
							<view class="total_price_status">
								<view class="total_price">
									<view class="icon">
										<image src="/static/common/price_icon.png" mode=""></image>
									</view>
									<view class="label">总金额</view>
									<view class="value">￥111.92</view>
								</view>
								<view class="status green" v-if="item.priceStatus == 1">已结算</view>
								<view class="status orange" v-if="item.priceStatus == 2">待结算</view>
							</view>
							<view class="other_info">
								<view class="o">
									<text class="label">买家：</text>66
								</view>
								<view class="o">
									<text class="label">运费：</text>￥20.00
								</view>
								<view class="o detail_btn">
									<text class="label">均价：</text>￥3.46
								</view>
								<view class="o">
									<text class="label">数量：</text>26扎
								</view>
								<view class="o">
									<text class="label">时间：</text>2025-04-18
								</view>
								<view class="o detail_btn" @click="item.isShowDetail = !item.isShowDetail">
									<view class="text">查看详情</view>
									<view class="top_bottom_icon">
										<image src="/static/common/top1.png" v-if="item.isShowDetail"></image>
										<image src="/static/common/bottom1.png" v-else></image>
									</view>
								</view>
							</view>
							<!-- 查看详情 -->
							<view class="table_wrap" v-if="item.isShowDetail">
								<view class="tw_head">
									<view class="th name">商品</view>
									<view class="th grade">等级</view>
									<view class="th grade">数量</view>
									<view class="th grade">最高</view>
									<view class="th grade">最低</view>
									<view class="th grade">均价</view>
									<view class="th grade">小计</view>
									<view class="th operation">操作</view>
								</view>
								<view class="tw_body" v-for="(d_item,index) in item.detailList" :key="index">
									<view class="td name ellipsis"> 卡布奇诺 </view>
									<view class="td grade ellipsis">A级</view>
									<view class="td grade ellipsis">16</view>
									<view class="td grade ellipsis">2</view>
									<view class="td grade ellipsis">5</view>
									<view class="td grade ellipsis">11</view>
									<view class="td grade ellipsis">48</view>
									<view 
										class="td operation ellipsis" 
										hover-class="custom_hover" 
										:hover-stay-time="200"
										@click="handleDetail(d_item)"> 查看 </view>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 加载中 -->
					<view class="loading_wrap" v-if="listLoading == 'loading'">
						<up-loadmore
							:status="listLoading"
							iconSize="22"
							iconColor="#FF3316"
							loadingIcon='semicircle'
							loadingText=""
							/>
					</view>
			</scroll-view>
			<!-- 去打印 按钮 -->
			<view class="btn_wrap"  v-if="listLoading != 'loading' && listData.length && tab == 2">
				<view 
					class="btn"
					hover-class="confirm_hover"
					:hover-stay-time="200"
					@click="handlePrint">
					<view class="icon">
						<image src="/static/common/print_icon.png" mode=""></image>
					</view>
					<view class="text">去打印</view>
				</view>
			</view>
			<!-- 调整数量 -->
			<up-popup :show="isShowAdjustCount" mode="center" :round="10" @open="handleAdjustCountOpen" @close="handleAdjustCountClose">
				<view class="popup_content_wrap stock_content_wrap">
					<view class="title">调整数量</view>
					<view class="info" v-if="currentEditItem">
						<view class="name">{{ currentEditItem.productName || currentEditItem.goodsName || '商品名称' }}</view>
						<view class="grade" v-if="currentEditItem.gradeName">{{ currentEditItem.gradeName }}</view>
						<view class="za">{{ currentEditItem.specName || currentEditItem.specification || '规格信息' }}</view>
					</view>
					<view class="count_wrap" v-if="isShowAdjustCount">
						<custom-number-box v-model="adjustCount" disabled type="number" />
					</view>
					<view class="btn_wrap">
						<view
							class="btn cancel"
							hover-class="cancel_hover"
							:hover-stay-time="200"
							@click="handleAdjustCountClose">取消</view>
						<button 
							size="default" 
							type="default" 
							class="btn confirm" 
							hover-class="confirm_hover" 
							:hover-stay-time="200" 
							@click="handleAdjustCountConfirm" 
							:loading="adjustCountBtnLoading"
							:disabled="adjustCountBtnLoading">保存</button>
					</view>
				</view>
			</up-popup>
			<!-- 详情明细 -->
			<up-popup :show="isShowDetailPopup" mode="bottom" :round="10" @close="isShowDetailPopup = false">
				<view class="detail_popup_wrap">
					<view class="table_wrap">
						<view class="tw_head">
							<view class="th name">商品</view>
							<view class="th grade">单价</view>
							<view class="th grade">数量</view>
							<view class="th id">买家ID</view>
							<view class="th grade">小计</view>
							<view class="th time">时间</view>
						</view>
						<view class="tw_body" v-for="(item,index) in tableList" :key="index">
							<view class="td name ellipsis"> 卡布奇诺 </view>
							<view class="td grade ellipsis">4</view>
							<view class="td grade ellipsis">5</view>
							<view class="td id ellipsis">112275</view>
							<view class="td grade ellipsis">999</view>
							<view class="td time ellipsis">08/22  17:46</view>
						</view>
					</view>
					<view class="total_wrap">
						<view class="text">商品数量：16扎</view>
						<view class="text">买家：6位</view>
						<view class="text red">合计：64.00元</view>
					</view>
				</view>
			</up-popup>
		</view>
	</view>
</template>

<script setup>
	import { computed, ref , onMounted} from 'vue';
	import { useStore } from 'vuex';
	import agentApi from '@/api/agent'

	const store = useStore();
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight;
	});
	
	const tab = ref(1)
	const tabsList = ref([
		{ id:1,name:'我的商品' },
		{ id:2,name:'待提货' },
		{ id:3,name:'待交易' },
		{ id:4,name:'交易中' },
		{ id:5,name:'已完成' },
	])
	// 选择tabs
	const handleTab = (e)=>{
		console.log(e)
		tab.value = e.id
		loadGetListData()
	}
	
	const params = {
		pageNo: 1,
		pageSize: 20,
	}


	// 获取列表数据
	const listLoading = ref('loadmore');
	const listData = ref([]);
	const loadGetListData = async () => {
		try {
			listData.value = []
			listLoading.value = 'loading'
			const requestParams = {
				...params
			}

			let response

			switch (tab.value) {
				case 1: // 我的商品
					response = await agentApi.getAgentApplyPageList(requestParams)
					break
				case 2: // 待提货
					response = await agentApi.getProductPickedPageList(requestParams)
					break
				case 3: // 待交易
					response = await agentApi.getWaitDealerPageList(requestParams)
					break
				case 4: // 交易中
					response = await agentApi.getProgressDealerPageList(requestParams)
					break
				case 5: // 已完成 - 
					// todo 暂时不知道接口
					break
				default:
					response = await agentApi.getAgentApplyPageList(requestParams)
			}

			if (response && response.records) {
				listData.value = response.records

				// 根据数据量设置加载状态
				if (response.records.length < requestParams.pageSize) {
					listLoading.value = 'nomore'  
				} else {
					listLoading.value = 'loadmore'  
				}
			} else {
				listData.value = []
				listLoading.value = 'nomore'
			}

		} catch (error) {
			console.error('获取平台代卖列表失败:', error)
			listData.value = []
			listLoading.value = 'loadmore'

			uni.showToast({
				title: '获取列表失败',
				icon: 'none'
			})
		}
	}


	// 提交代卖
	const handleAgentApply = async (item) => {
		try {
			await agentApi.add({
				flowerProductId: item.id,
				applyQuantity: item.applyQuantity
			})
			uni.showToast({
				title: '提交成功',
				icon: 'success'
			})
			loadGetListData()

		} catch (error) {
			console.error('提交代卖失败:', error)
			uni.showToast({
				title: error.message || '提交失败',
				icon: 'none'
			})
		}
	}

	// 待提货数量修改
	const handleUpdateActQuantity = async (item) => {
		try {
			await agentApi.editActQuantity({
				id: item.id,
				actQuantity: item.actQuantity
			})
			uni.showToast({
				title: '修改成功',
				icon: 'success'
			})
			loadGetListData()

		} catch (error) {
			console.error('修改数量失败:', error)
			uni.showToast({
				title: '修改失败',
				icon: 'none'
			})
		}
	}


	/*
	const loadGetListDataMock = () => {
		listData.value = []
		listLoading.value = 'loading'
		setTimeout(()=>{
			listLoading.value = 'loadmore'
			listData.value = [
				{
					
					id:1,
					name:'橙色芭比',
					salesStatus:1, // 1代售中 其他...
					priceStatus:1, // 1已结算 2待结算
					branch:20,
					count:99,
					isShowDetail:false,
					detailList:[
						{},{},{}
					]
				},
				{
					
					id:1,
					name:'橙色芭比1',
					salesStatus:1, // 1代售中 其他...
					priceStatus:1, // 1已结算 2待结算
					branch:20,
					count:99,
					isShowDetail:false,
					detailList:[
						{},{},{}
					]
				},
				{
					
					id:1,
					name:'橙色芭比2',
					salesStatus:0, // 1代售中 其他...
					priceStatus:2, // 1已结算 2待结算
					branch:20,
					count:99,
					isShowDetail:false,
					detailList:[
						{},{},{}
					]
				},
				{
					
					id:1,
					name:'橙色芭比3',
					salesStatus:0, // 1代售中 其他...
					priceStatus:2, // 1已结算 2待结算
					branch:20,
					count:99,
					isShowDetail:false,
					detailList:[
						{},{},{}
					]
				},
				{
					
					id:1,
					name:'橙色芭比3',
					salesStatus:0, // 1代售中 其他...
					priceStatus:2, // 1已结算 2待结算
					branch:20,
					count:99,
					isShowDetail:false,
					detailList:[
						{},{},{}
					]
				},
				{
					
					id:1,
					name:'橙色芭比3',
					salesStatus:0, // 1代售中 其他...
					priceStatus:1, // 1已结算 2待结算
					branch:20,
					count:99,
					isShowDetail:false,
					detailList:[
						{},{},{}
					]
				},
				{
					
					id:1,
					name:'橙色芭比3',
					salesStatus:0, // 1代售中 其他...
					priceStatus:1, // 1已结算 2待结算
					branch:20,
					count:99,
					isShowDetail:false,
					detailList:[
						{},{},{}
					]
				},
				{
					
					id:1,
					name:'橙色芭比3',
					salesStatus:0, // 1代售中 其他...
					priceStatus:1, // 1已结算 2待结算
					branch:20,
					count:99,
					isShowDetail:false,
					detailList:[
						{},{},{}
					]
				}
			]
		},1000);
	};
*/
	
	// 调整数量
	const isShowAdjustCount = ref(false)
	const adjustCountBtnLoading = ref(false)
	const adjustCount = ref(0)
	const currentEditItem = ref(null) // 当前正在编辑的数据
	const currentEditIndex = ref(-1) // 当前正在编辑的数据索引

	const handleShowAdjustCount = (item, index) => {
		// 记录当前编辑的数据
		currentEditItem.value = { ...item }
		currentEditIndex.value = index

		// 预填充当前数量
		adjustCount.value = item.applyQuantity || 0

		// 显示弹窗
		isShowAdjustCount.value = true
	}

	const handleAdjustCountOpen = () => {
		console.log('handleAdjustCountOpen')
	}

	// 关闭弹窗时清理数据
	const handleAdjustCountClose = () => {
		isShowAdjustCount.value = false
		currentEditItem.value = null
		currentEditIndex.value = -1
		adjustCount.value = 0
	}


	const handleAdjustCountConfirm = async () => {
		// 数据验证
		if (!currentEditItem.value) {
			uni.showToast({
				title: '未找到要编辑的数据',
				icon: 'none'
			})
			return
		}

		if (!adjustCount.value || adjustCount.value < 0) {
			uni.showToast({
				title: '请输入有效的数量',
				icon: 'none'
			})
			return
		}

		if (adjustCount.value === currentEditItem.value.applyQuantity) {
			uni.showToast({
				title: '数量未发生变化',
				icon: 'none'
			})
			isShowAdjustCount.value = false
			return
		}

		try {
			adjustCountBtnLoading.value = true
			// 提交参数
			const updateData = {
				id: currentEditItem.value.id,
				applyQuantity: adjustCount.value,
			}

			console.log('提交数量调整:', updateData)

			// todo 根据当前tab选择不同的接口,没找到对应接口
			let apiCall
			switch (tab.value) {
				case 1: // 我的商品
					// apiCall = agentApi.updateApplyQuantity(updateData)
					break
				case 2: // 待提货
					// apiCall = agentApi.editActQuantity(updateData)
					break
				case 3: // 待交易
					break
				case 4: // 交易中
					break
				default:
					throw new Error('未知的操作类型')
			}

			await apiCall

			// 更新本地列表数据
			if (currentEditIndex.value >= 0 && currentEditIndex.value < listData.value.length) {
				listData.value[currentEditIndex.value].applyQuantity = adjustCount.value
				if (listData.value[currentEditIndex.value].quantity !== undefined) {
					listData.value[currentEditIndex.value].quantity = adjustCount.value
				}
			}

			uni.showToast({
				title: '数量调整成功',
				icon: 'success'
			})

			// 关闭弹窗
			isShowAdjustCount.value = false

			// 重新加载列表数据
			loadGetListData()

		} catch (error) {
			console.error('数量调整失败:', error)

			let errorMessage = '调整失败，请重试'
			if (error && error.message) {
				errorMessage = error.message
			}

			uni.showToast({
				title: errorMessage,
				icon: 'none'
			})

		} finally {
			adjustCountBtnLoading.value = false
		}
	}
	
	// 去打印
	const handlePrint = ()=>{
		uni.navigateTo({
			url:'/pages/deliveryNotePrint/deliveryNotePrint'
		})
	}
	
	// 查看详情明细
	const isShowDetailPopup = ref(false)
	const tableList = ref([
		{},{},{},{},{}
	])
	const handleDetail = (item)=>{
		console.log(item)
		isShowDetailPopup.value = true
	}
	
	
	onMounted(()=>{
		loadGetListData()
	})
	
</script>
<style lang="scss">
	._wrap{
		padding: 0 20rpx;
	}
	.tabs_wrap{
		display: flex;
		height: 82rpx;
		.list{
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			color: #999;
			font-size: 32rpx;
			position: relative;
			&.active{
				color: #333333;
				font-weight: bold;
				&::after{
					content: '';
					width: 28rpx;
					height: 8rpx;
					background: #FF3316;
					border-radius: 8rpx;
					position: absolute;
					bottom: 8rpx;
					left: 50%;
					margin-left: -14rpx;
				}
			}
		}
	}
	.inform_wrap{
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		background: #FFFFFF;
		margin: 20rpx 0;
		padding: 0 20rpx;
		height: 88rpx;
		.icon{
			width: 48rpx;
			height: 48rpx;
			display: flex;
		}
		.text{
			font-size: 28rpx;
			color: #666666;
			flex: 1;
			padding-left: 20rpx;
		}
	}
	.list_wrap{
		border-radius: 20rpx;
		background: #FFFFFF;
		.list{
			padding: 30rpx 20rpx;
			border-top: 1rpx solid #F0F0F0;
			&:first-child{
				border: 0;
			}
		}
		.name_status{
			display: flex;
			align-items: center;
			.name{
				font-size: 28rpx;
				color: #333333;
			}
			.status{
				width: 96rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				border-radius: 4px;
				background: rgba(0, 173, 130, 0.1);
				border: 1rpx solid #00AD82;
				font-size: 24rpx;
				color: #00AD82;
				margin-left: 20rpx;
			}
			.status1{
				font-size: 24rpx;
				color: #FF8D1A;
				margin-left: 20rpx;
			}
		}
		.branch_count_btn{
			display: flex;
			align-items: center;
			padding-top: 20rpx;
			font-size: 24rpx;
			justify-content: space-between;
			.branch{
				color:#999999;
			}
			.count{
				display: flex;
				align-items: center;
				.lable{
					color:#999999;
				}
				.value{
					width: 82rpx;
					text-align: center;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 8rpx;
					background: #F1F1F1;
					color: #333333;
					font-size: 26rpx;
					margin-left: 10rpx;
				}
			}
			.btn{
				width: 148rpx;
				text-align: center;
				height: 48rpx;
				line-height: 48rpx;
				border-radius: 85rpx;
				background: #F5564D;
				color: #fff;
			}
		}
	}
	.dyj_list_wrap{
		.list{
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 30rpx 20rpx;
			margin-bottom: 20rpx;
			.name_grade{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;
				.name{
					color: #333333;
					display: flex;
					align-items: center;
					.icon{
						display: flex;
						width: 28rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}
				}
				.grade{
					color: #F5564D;
					padding-left: 20rpx;
				}
			}
			.branch_count_take{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #333333;
				padding-top: 30rpx;
				.branch,.count,.take{
					padding-right: 40rpx;
					display: flex;
					align-items: center;
				}
				.label{
					color: #999;
				}
			}
		}
	}
	.wc_list_wrap{
		.list{
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 30rpx 20rpx;
			margin-bottom: 20rpx;
			.total_price_status{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #f0f0f0;
				.total_price{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: bold;
					.icon{
						width: 28rpx;
						height: 28rpx;
						display: flex;
					}
					.label{
						color: #000000;
						padding-left: 10rpx;
					}
					.value{
						color: #000000;
						padding-left: 10rpx;
					}
				}
				.status{
					font-size: 24rpx;
				}
			}
			.other_info{
				display: flex;
				flex-wrap: wrap;
				.o{
					width: 33.33%;
					font-size: 24rpx;
					color: #333;
					padding-top:20rpx;
					.label{
						color: #999;
					}
				}
				.detail_btn{
					display: flex;
					justify-content: flex-end;
					align-items: center;
					.top_bottom_icon{
						display: flex;
						height: 8rpx;
						width: 16rpx;
						margin-left: 10rpx;
					}
				}
			}
			.table_wrap{
				margin-top: 30rpx;
				border-radius: 0 0 10rpx 10rpx;
				border-width: 0 1rpx 1rpx 1rpx;
				border-color: #f0f0f0;
				border-style: solid;
				overflow: hidden;
				.tw_head,.tw_body{
					display: flex;
					.th,.td{
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						color: #fff;
						font-size: 24rpx;
					}
					.td{
						background: #fff;
						color: #666;
						.operation{
							color: #2A82E4;
						}
					}
					.name{
						flex: 1;
					}
					.grade{
						width: 72rpx;
					}
					.number{
						width: 72rpx;
					}
					.price{
						width: 96rpx;
					}
					.total{
						width: 92rpx;
					}
					.operation{
						width: 80rpx;
					}
				}
				.tw_head{
					border-radius: 10rpx 10rpx 0 0;
					background: #00AD82;
				}
				.tw_body{
					padding-top: 5rpx;
					.operation{
						color: #F5564D;
					}
				}
			}
		}
	}
	.no_data{
		background: #fff;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: calc(100% - 40rpx);
		.icon{
			width: 280rpx;
			height: 322rpx;
		}
	}
	.popup_content_wrap{
		width: 500rpx;
		padding:0 30rpx;
		.title{
			color: #333333;
			font-size: 36rpx;
			text-align: center;
			padding-top: 30rpx;
			font-weight: bold;
		}
		.btn_wrap{
			display: flex;
			justify-content: center;
			padding: 60rpx 0 30rpx;
			.btn{
				width: 190rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align:  center;
				border-radius: 120rpx;
				font-size: 32rpx;
				padding: 0;
				margin: 0;
			}
			.cancel{
				background: #FFF0F0;
				color: #FE4C20;
				margin-right: 60rpx;
				&.cancel_hover{
					background: #fbdcdc;
				}
			}
			.confirm{
				background: #F5564D;
				color: #FFFFFF;
				&.confirm_hover{
					background: #da4239;
				}
					
			}
		}
		.number-box-input{
			width:180rpx;
			height:65rpx;
			line-height:65rpx;
			margin: 0 10rpx;
			border-radius:4rpx;
			text-align:center;
			font-size:28rpx;
			background:#F1F1F1;
		}
	}
	.stock_content_wrap{
		.info{
			display: flex;
			justify-content: center;
			font-size: 32rpx;
			padding-top: 20rpx;
			.name{
				color: #333333;
				font-weight: bold;
			}
			.grade{
				color:#F5564D;
				padding-left: 20rpx;
				font-weight: bold;
			}
			.za{
				color:#999;
				font-size: 28rpx;
				padding-left: 20rpx;
				padding-top: 6rpx;
			}
		}
		.count_wrap{
			display: flex;
			justify-content: center;
			padding-top: 30rpx;
		}	
	}
	.btn_wrap{
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.btn{
			width: 638rpx;
			height: 76rpx;
			border-radius: 108rpx;
			background: #F5564D;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon{
				width: 26rpx;
				height: 27rpx;
				display: flex;
			}
			.text{
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				padding-left: 10rpx;
			}
		}
	}
	.detail_popup_wrap{
		padding: 20rpx;
		.table_wrap{
			border-radius: 0 0 10rpx 10rpx;
			border-width: 0 1rpx 1rpx 1rpx;
			border-color: #f0f0f0;
			border-style: solid;
			overflow: hidden;
			.tw_head,.tw_body{
				display: flex;
				.th,.td{
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					color: #fff;
					font-size: 24rpx;
				}
				.td{
					background: #fff;
					color: #666;
					.operation{
						color: #2A82E4;
					}
				}
				.name{
					flex: 1;
				}
				.grade{
					width: 80rpx;
				}
				.id{
					width:100rpx;
				}
				.time{
					width: 180rpx;
				}
			}
			.tw_head{
				border-radius: 10rpx 10rpx 0 0;
				background: #00AD82;
			}
			.tw_body{
				padding-top: 5rpx;
				.operation{
					color: #F5564D;
				}
			}
		}
		.total_wrap{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 20rpx;
			font-size: 24rpx;
			color: #666666;
		}
	}
</style>
